<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            margin: 50px;
            padding: 20px;
            border: 40px solid pink;
            background: red;
            color: green;
        }

        #box1 {
            margin-left: 30px;
            width: 300px;
            background: yellow;
        }
        #box2{
            background-color: pink;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>


<div id='box'>
    width: 200px; +
    height: 200px; +
    margin: 50px; +
    padding: 20px; +
    border: 40px;
</div>

<div id="box2">

</div>


<div id='box1'>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
    <p>邀您共谱算力新篇</p>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    //  offset: 偏移  content(内容) + (padding乘以2) + (border乘以2)
    // 坑: margin 不算在里面!!
    // 	offsetHeight
    console.log("offset: 偏移  content(内容) + (padding乘以2) + (border乘以2)");
    console.log("box.offsetHeight: " + box.offsetHeight);
    console.log("----------------------------------------------");

    // 	offsetWidth
    console.log("box.offsetWidth: " + box.offsetWidth );
    console.log("----------------------------------------------");

    // 	offsetTop
    console.log("距离父级的定位距离(包括边框~) 也可能是margin");
    console.log("js方式-box.offsetTop: " + box.offsetTop);
    console.log("jquery方式-top值: " +  $("#box").offset().top);
    console.log("----------------------------------------------");

    // 	offsetLeft
    console.log("box.offsetLeft: " + box.offsetLeft);//50== 距离父级的定位距离 也可能是margin
    console.log("----------------------------------------------");
    // 	offsetParent


    $(window).scroll(function () {
        console.log("**********************************");
        console.log($("#box2").offset().top);
        console.log("**********************************");
    });



    // client  content + padding
    // clientWidth
    console.log(box.clientWidth);//140
    // clientHeight
    console.log(box.clientHeight);//140


    //  scroll ：滚动监听
    //  scrollHeight
    console.log(box1.scrollHeight);//1188
    // 	scrollWidth
    console.log(box1.scrollWidth);//300
    // 	scrollTop  ==  (document.documentElement.scrollTop) 卷进去的大小
    console.log(document.documentElement.scrollTop);//随机 392
    // 	scrollLeft ==  (document.documentElement.scrollLeft)
    console.log(document.documentElement.scrollLeft);//0
</script>
</body>
</html>